<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户查询</title>
    <script src="Vue/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
    <style>
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<div id="select" align="center">
    <button @click="select">查询用户信息</button>
    <table width="800" border="1" bgcolor="aqua" border-color="red">
        <tr>
            <td>id</td>
            <td>username</td>
            <td>password</td>
            <td>email</td>
            <td>操作</td>
        </tr>
        <tr v-for="item in users" :key="item.id" @click="del">
            <td>{{item.id}}</td>
            <td>{{item.username}}</td>
            <td>{{item.password}}</td>
            <td>{{item.email}}</td>
            <td>
                <button @click="del(item.id)">删除</button>
                <button @click="updata(item.id,item.password)">修改</button>
            </td>
        </tr>
    </table>
    <button @click="add">新增用户</button>
    <input type="text" placeholder="用户名" v-model="username">
    <input type="password" placeholder="密码" v-model="password">
    <input type="text" placeholder="邮箱" v-model="email"><br>
    <input type="text" v-model="newpsd" placeholder="新密码">
    <button @click="save">保存</button>

</div>
<script>
    var vue = new Vue({
        el: "#select",
        data: {
            users: [
                {
                    id: "0",
                    username: "cgm",
                    password: "666",
                    email: "110@qq.com"//会被覆盖
                }
            ],
            username: "",
            password: "",
            email: "",
            id: 0,
            newpsd: "",

        },
        methods: {
            select() {//获取数据
                var _this = this;
                axios.get("http://120.79.234.76:8091/201905/userSelect.php").then(function (respone) {
                    _this.users = respone.data;
                });
            },
            add() {//增加数据
                var _this = this;
                axios.get("http://120.79.234.76:8091/201905/adduser.php", {
                        params: {
                            username: this.username,
                            psd: this.password,
                            email: this.email
                        }
                    }
                ).then(function (res) {
                    if (res.status == 404) {
                        alert(res.data.msg);
                    } else {
                        alert("已增加");
                        _this.username = _this.password = _this.email = "";
                    }
                });
            },
            del(id) {//删除
                var _this = this;
                axios.get("http://120.79.234.76:8091/201905/userdelete.php", {
                    params: {
                        id: id
                    }
                }).then(function (res) {
                    if (res.status == 200) {
                        alert(res.data.msg);
                        for (var i = 0; i < _this.users.length; i++) {
                            if (_this.users[i].id == id) {
                                _this.users.splice(i, 1);//界面中删除id位置
                            }
                        }
                    } else {
                        alert(res.data.msg);
                    }
                });
            },
            updata(id, psd) {
                this.id = id;
                this.newpsd = psd;
            },
            save() {//发送修改
                var _this = this;
                axios.get("http://120.79.234.76:8091/201905/userupdate.php", {
                    params: {
                        id: this.id,
                        psd: this.newpsd
                    }
                }).then(function (res) {

                    alert(res.data.msg);
                    _this.id = 0;
                    _this.newpsd = "";
                });
            }
        }
    });
</script>
</body>
</html>